<template>
	<view>
		<image class="samePar bodyBg posAbso ltzero" src="../../../static/images/login/loginBg.png"></image>
		<view class="cpArea">
			<view class="formItem">
				<view class="formItemTit">姓名</view>
				<view class="formItemCon">
					<view class="street hasSel">{{userName}}</view>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemTit">性别</view>
				<view class="formItemCon">
					<view class="street hasSel">{{userSex}}</view>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemTit">年龄</view>
				<view class="formItemCon">
					<view class="street hasSel">{{userAge}}</view>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemTit">职业</view>
				<picker class="formItemCon"  @change="bindZyFilter" :value="zyIndex" :range="zyFilter">
					<view class="street" :class="[isSelZyFlag ? 'hasSel' : '']">{{userWork}}</view>
					<text class="iconfont icon-xiala"></text>
				</picker>
			</view>
			<!-- <view class="formItem">
				<view class="formItemTit">区域</view>
				<picker class="formItemCon"  @change="goSelGrid" :value="gridIndex" :range="gridList" range-key="village">
					<view class="street" :class="[isSelGridFlag ? 'hasSel' : '']">{{gridName}}</view>
					<text class="iconfont icon-xiala"></text>
				</picker>
			</view> -->
			<button class="comBtn" @tap="goTest">开始测试</button>
		</view>
	</view>
</template>

<script>
	//import getVillage from '@/mixins/getVillage.js'
	export default {
		data(){
			return{
				userName:'',
				userSex:'',
				userAge:'',
				gridName:'请选择所在社区/村庄',
				userWork:'请选择职业',
				zyIndex:-1,
				isSelZyFlag:false,
				zyFilter:['机关工作人员','政法工作人员','企业员工','个体工商户','城乡居民','教育工作者','医疗工作者','武装力量','学生','其他'],
				orderId:0,
				cpTit:'',
				currPage:'selAreaCp',
				scaleOwner:''
			}
		},
		//mixins:[getVillage],
		onLoad(option){
			this.orderId = option.orderId;
			this.userName = option.userName;
			this.userSex = option.userSex;
			this.userAge = option.userAge;
			this.scaleOwner = option.scaleOwner;
			this.cpTit = option.cpTit;
			//this.checkZzCp();
		},
		onUnoad(){
			uni.removeStorageSync('userCpInfo');
		},
		methods:{
			bindZyFilter(e){
				this.zyIndex = e.detail.value;
				this.isSelZyFlag = true;
				this.userWork = this.zyFilter[this.zyIndex];
			},
			goTest(){
				if(this.userWork == '请选择职业'){
					this.util.showToast('请选择职业')
				}else{
					let userCpInfo = { userName:this.userName,userSex:this.userSex,userAge:this.userAge,userWork:this.userWork }
					uni.setStorageSync('userCpInfo',userCpInfo)
					uni.navigateTo({
						url:'/pages/subIndex/cpQue/cpQue?orderId='+ this.orderId +'&cpTit=' + this.cpTit + '&fromPage=cpDetPage&scaleOwner=' + this.scaleOwner
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		position: relative;
	}
	.bodyBg{
		z-index: -1;
	}
	.cpArea{
		padding: 30rpx 30rpx 0;
	}
	.formItem{
		height: var(--hei90);
		line-height: var(--hei90);
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		.formItemTit{
			width: 120rpx;
			height: 100%;
			font-size: 26rpx;
			color: $pss-text-color0;
		}
		.formItemCon{
			flex: 1;
			height: 100%;
			position: relative;
			.street{
				font-size: 26rpx;
				color: #888;
				text-align: right;
				padding-right: 40rpx;
				&.hasSel{
					color:$pss-text-color0;
				}
			}
			.icon-gengduo,
			.icon-xiala{
				font-size: 22rpx;
				color: #999;
				position: absolute;
				right: 0;
				top: 0;
			}
			.icon-xiala{
				font-size: 26rpx;
			}
		}
	}
	.comBtn{
		margin-top: calc(var(--hei100) * 2);
		&.dis{
			background: lighten($pss-color-blueDeep, $amount: 20%);
		}
	}
</style>